﻿<h1>MilkChart</h1>
<p><a href="http://mootools.net/forge/p/milkchart">http://mootools.net/forge/p/milkchart</a></p>
<p>This library will generate a graph similar to Microsoft Excel.</p>

<script type="text/javascript" src="/Content/MilkChart/Source/mootools-core-1.4.0.js"></script>
<script type="text/javascript" src="/Content/MilkChart/Source/MilkChart_src.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var chart = new MilkChart.Column("chart");
    });
</script>

<h2>Examples</h2>

<!-- Table structure -->
<table id="chart">
    <thead>
        <tr>
            <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>8.3</td><td>70</td><td>10.3</td><td>100</td></tr>
        <tr><td>8.6</td><td>65</td><td>10.3</td><td>125</td></tr>
        <tr><td>8.8</td><td>63</td><td>10.2</td><td>106</td></tr>
        <tr><td>10.5</td><td>72</td><td>16.4</td><td>162</td></tr>
        <tr><td>11.1</td><td>80</td><td>22.6</td><td>89</td></tr>

    </tbody>
    <tfoot>
        <tr>
            <td>Row 1</td><td>Row 2</td><td>Row 3</td><td>Row 4</td><td>Row 5</td>
        </tr>
    </tfoot>
</table>

<h2>Syntax</h2>

<pre><code>&lt;script type="text/javascript" src="mootoolsCore.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="MilkChart.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

    window.addEvent("domready", function() {
        var chart = new MilkChart(table[, options]);
        // Load JSON data from url
        chart.load({
            method: 'get',
            url: 'data.json'
        });
    });
&lt;/script&gt;

&lt;!-- Table structure --&gt;
&lt;table id="chart"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Column A&lt;/th&gt;&lt;th&gt;Column B&lt;/th&gt;&lt;th&gt;Column C&lt;/th&gt;&lt;th&gt;Column D&lt;/th&gt;

        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;&lt;td&gt;8.3&lt;/td&gt;&lt;td&gt;70&lt;/td&gt;&lt;td&gt;10.3&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;/tr&gt;

        &lt;tr&gt;&lt;td&gt;8.6&lt;/td&gt;&lt;td&gt;65&lt;/td&gt;&lt;td&gt;10.3&lt;/td&gt;&lt;td&gt;125&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;8.8&lt;/td&gt;&lt;td&gt;63&lt;/td&gt;&lt;td&gt;10.2&lt;/td&gt;&lt;td&gt;106&lt;/td&gt;&lt;/tr&gt;

        &lt;tr&gt;&lt;td&gt;10.5&lt;/td&gt;&lt;td&gt;72&lt;/td&gt;&lt;td&gt;16.4&lt;/td&gt;&lt;td&gt;162&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;11.1&lt;/td&gt;&lt;td&gt;80&lt;/td&gt;&lt;td&gt;22.6&lt;/td&gt;&lt;td&gt;89&lt;/td&gt;&lt;/tr&gt;

    &lt;/tbody&gt;
    &lt;tfoot&gt;
        &lt;tr&gt;
            &lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;Row 4&lt;/td&gt;&lt;td&gt;Row 5&lt;/td&gt;

        &lt;/tr&gt;
    &lt;/tfoot&gt;
&lt;/table&gt;
</code></pre>

<ul>
<li>Note: This script will default to the [Column] type graph</li>
<li>Note: The 'tfoot' is not required but MilkChart uses this to gather row names.  If the '' does not have a '' then no row names are shown
</li>
</ul>

<h2>Arguments</h2>
<ol>
<li>element - (mixed) a table Element that should be transformed or container element to place the chart in</li>

<li>options - (object, optional) a key/value set of options</li>
</ol><h2>Options</h2><ul>
<li>width - (int: Defaults to 400) Width of chart in px</li>
<li>height - (int: Defaults to 280) Height of chart in px</li>
<li>padding - (int: Defaults to 12) Outer padding of chart in px</li>
<li>font - (string: Defaults to "Verdana") Font to be used for labels</li>
<li>fontColor - (string: Defaults to #000000) Color used for labels</li>
<li>fontSize - (int: Defaults to 10) Font size in pt</li>
<li>background - (string: Defaults to #ffffff) Background color of chart</li>

<li>chartLineColor - (string: Defaults to #333333) Color of value lines</li>
<li>chartLineWeight - (int: Defaults to 1) Line Wieght of value lines in px</li>
<li>border - (bool: Defaults to true) Draws a border around edge chart (ignores padding)</li>
<li>borderWeight - (int: Defaults to 1) Border width in px</li>
<li>borderColor - (string: Defaults to #333333) Border color</li>
<li>titleSize - (int: Defaults to 18) Size of title font in pt</li>
<li>titleFont - (string: Defaults to "Verdana") Font used for title</li>
<li>titleColor - (string: Defaults to #000000) Font color for title</li>
<li>showRowNames - (bool: Defaults to true) Show the row labels on one of the axes</li>

<li>showValues - (bool: Defaults to true) Show values on one of the axes</li>
<li>showKey - (bool: Defaults to true) Shows the column labels</li>
<li>useZero - (bool: Defaults to true) Always use 0 as the lowest value</li>
<li>useFooter - (bool: Defaults to true) Get row labels from table footer</li>
</ul><h2>Load data</h2><p>Each chart has a <code>.load()</code> method that takes the same options as a normal Request.JSON object.  Except for the onSuccess method which is used by MilkChart to process the incoming data.  Data needs to be in the form of:</p><pre><code>{
    "title": "My Chart",
    "colNames": ["Internet Explorer", "FireFox"],
    "rowName": ["Q1", "Q2", "Q3", "Q4"],
    "data": [
        [1,2],
        [3,4],
        [5,6],
        [7,8]
    ]
}
</code></pre><p><code>title</code> is optional.</p><h2>Switch Axes</h2>
<p>Each chart types also has a <code>.switchAxes()</code> method which swaps the column and row data.</p>